<template>
    <div class="earlyWarning">
        <div v-if="tableData.length == 0" class="tablestyle_One"
            style="background: linear-gradient( #E3F0FF, #FFFFFF);text-align: center;font-weight: 580;font-size: 14px;line-height:40px;">
            暂无任务</div>
        <div class="box-wrapper">
            <div v-if="tableData.length == 1 ">
                <div class="tablestyle_One" v-for="(itme,index) in tableData"
                    :style="{'background': getBackgroundColor(index)}">
                    <div style="text-align: center;font-size: 16px ;font-weight: bold;padding: 10px 0px 0px 0px;">
                        {{itme.branch_id_name}}任务</div>
                    <div style="display: flex;flex-wrap:wrap;justify-content: space-between">
                        <div class="tableELCol" @click="Timeoutjump(itme.branch_id,itme.collect_id)"
                            v-if="itme.collect_count != ''">
                            <div class="tableELColMe">
                                {{itme.collect_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.collect_id_name}}超时</div>
                        </div>
                        <div class="tableELCol" v-if="itme.dispatch_count != ''"
                            @click="Timeoutjump(itme.branch_id,itme.dispatch_id)">
                            <div class="tableELColMe">
                                {{itme.dispatch_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.dispatch_id_name}}超时</div>
                        </div>
                        <div class="tableELCol" v-if="itme.distribution_count != ''"
                            @click="Timeoutjump(itme.branch_id,itme.distribution_id)">
                            <div class="tableELColMe">
                                {{itme.distribution_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.distribution_id_name}}超时</div>
                        </div>
                        <div class="tableELCol" v-if="itme.sign_count != ''"
                            @click="Timeoutjump(itme.branch_id,itme.sign_id)">
                            <div class="tableELColMe">
                                {{itme.sign_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.sign_id_name}}超时</div>
                        </div>
                        <div class="tableELCol" v-if="itme.receipt_count != ''"
                            @click="Timeoutjump(itme.branch_id,itme.receipt_id)">
                            <div class="tableELColMe">
                                {{itme.receipt_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.receipt_id_name}}超时</div>
                        </div>
                        <div class="tableELCol" v-if="itme.box_recycle_count != ''"
                            @click="Timeoutjump(itme.branch_id,itme.box_recycle_id)">
                            <div class="tableELColMe">
                                {{itme.box_recycle_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.box_recycle_id_name}}超时</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid" v-else>
                    <div class="grid-item" v-for="(itme,index) in tableData"
                        :style="{'background': getBackgroundColor(index)}">
                        <div style="text-align: center;font-size: 16px ;font-weight: bold;padding: 10px 0px 0px 0px;">
                            {{itme.branch_id_name}}超时任务</div>
                        
                        <div style="display: flex;flex-wrap:wrap;">
                                <!-- 揽收 -->
                            <div class="tableELCol" @click="Timeoutjump(itme.branch_id,itme.collect_id)"
                                v-if="itme.collect_count != ''">
                                <div class="tableELColMe">
                                    {{itme.collect_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.collect_id_name}}超时</div>
                            </div>
                            <!-- 干线 -->
                            <div class="tableELCol" v-if="itme.dispatch_count != ''"
                                @click="Timeoutjump(itme.branch_id,itme.dispatch_id)">
                                <div class="tableELColMe">
                                    {{itme.dispatch_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.dispatch_id_name}}超时</div>
                            </div>
                            <!-- 配送 -->
                            <div class="tableELCol" v-if="itme.distribution_count != ''"
                                @click="Timeoutjump(itme.branch_id,itme.distribution_id)">
                                <div class="tableELColMe">
                                    {{itme.distribution_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.distribution_id_name}}超时</div>
                            </div>
                            <!-- 签收 -->
                            <div class="tableELCol" v-if="itme.sign_count != ''"
                                @click="Timeoutjump(itme.branch_id,itme.sign_id)">
                                <div class="tableELColMe">
                                    {{itme.sign_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.sign_id_name}}超时</div>
                            </div>
                            <!--  回单创建-->
                            <div class="tableELCol" v-if="itme.receipt_create_count != ''"
                                @click="Timeoutjump(itme.branch_id,itme.receipt_create_id)">
                                <div class="tableELColMe">
                                    {{itme.receipt_create_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.receipt_create_id_name}}</div>
                            </div>
                            <!-- 回单签收 -->
                            <div class="tableELCol" v-if="itme.receipt_sign_count != ''"
                                @click="Timeoutjump(itme.branch_id,itme.receipt_sign_id)">
                                <div class="tableELColMe">
                                    {{itme.receipt_sign_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.receipt_sign_id_name}}</div>
                            </div>
                            <!-- 回箱创建时间 -->
                            <div class="tableELCol" v-if="itme.box_recycle_create_count != ''"
                                @click="Timeoutjump(itme.branch_id,itme.box_recycle_create_id)">
                                <div class="tableELColMe">
                                    {{itme.box_recycle_create_count}}</div>
                                <div style="line-height: 24px;color: #7F8283;">{{itme.box_recycle_create_id_name}}</div>
                            </div>
                            <!-- 回箱签收 -->
                            <div class="tableELCol" v-if="itme.box_recycle_sign_count != ''"
                            @click="Timeoutjump(itme.branch_id,itme.box_recycle_sign_id)">
                            <div class="tableELColMe">
                                {{itme.box_recycle_sign_count}}</div>
                            <div style="line-height: 24px;color: #7F8283;">{{itme.box_recycle_sign_id_name}}</div>
                        </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    </div>
</template>

<script>
    // import {
    //     overtimerecordsshow
    // } from "@/api/Largewidthmeterlist";
    import { getChartData } from "@/api/echarts";
    import { getNowFormatDate } from "@/utils/auth";
    export default {
        name: 'rangeStatistics',
        components: {},
        props: [],
        data() {
            return {
                tableData: [],
            };
        },
        mounted() {
            this.thermometermonitorObj()
        },
        methods: {
            getBackgroundColor(value) {
                // 根据不同的值返回不同的颜色
                if (value == 0) {
                    return 'linear-gradient( #E3F0FF, #FFFFFF)';
                } else if (value == 1) {
                    return 'linear-gradient( #FFFBEA, #FFFFFF)';
                } else if (value == 2) {
                    return 'linear-gradient( #F0F9EB, #FFFFFF)';
                } else if (value == 3) {
                    return 'linear-gradient(#F4F4F5, #FFFFFF)';
                } else if (value == 4) {
                    return 'linear-gradient(#FEF0F0, #FFFFFF)';
                }
                else {
                    return 'linear-gradient( #E3F0FF, #FFFFFF)';
                }
            },
            thermometermonitorObj() {
                var newnow = getNowFormatDate()
                var param = {
                    custom_chart_id: "23",
                    "create_day": newnow,
                    
                }
                getChartData(param).then((res) => {
                    this.tableData = res.data.data
                })
            },
            Timeoutjump(router, node_id) {
                this.$router.push({
                    name: "TimeOutwarningList", query: {
                        branch_id: router,
                        node_id: node_id,
                    }
                })
            },
        },
    };
</script>
<style lang="scss" scoped>
    .earlyWarning::-webkit-scrollbar {
        width: 3px;
    }

    .earlyWarning::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    .earlyWarning::-webkit-scrollbar-thumb {
        background: #B6B6B6;
        border-radius: 10px;
    }

    .earlyWarning::-webkit-scrollbar-thumb:hover {
        background: #B6B6B6;
    }

    .earlyWarning {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 300px;
        padding: 0px 3px 0px 0px;
        font-size: 15px;
        .tablestyle {
            margin: 0 auto;
            width: 50%;
            border-radius: 6px;
            margin-bottom: 10px;
            border: 1px solid #B2B9D4;
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
        }

        .tablestyle_One {
            margin: 0 auto;
            border-radius: 6px;
            margin-bottom: 10px;
            border: 1px solid #B2B9D4;
            margin-top: 10px;
            padding: 0px 10px 0px 0px;
        }

        .tableELCol {
            height: 50px;
            margin: 10px 0px 10px 10px;
            text-align: center;
            padding: 0px 10px 10px 10px;
            Cursor: pointer;

        }

        .tableELColMe {
            /* margin: 12px 0px 0px 0px;
            font-size: 20px; */
            font-weight: bold;
            /* color: #CA6968; */
        }

        .grid {
            column-count: 2;
            /* 设置列数 */
            column-gap: 8px;
            /* 设置列之间的间隔 */
        }

        .grid-item {
            display: inline-block;
            width: 100%;
            /* 每个项目的宽度 */
            margin-top: 8px;
            border-radius: 6px;
            border: 1px solid #B2B9D4;
            /* 设置项目之间的垂直间距 */
        }
    }
</style>